<template>
  <div>
    <div v-if="form.comparisonType === 'form'" class="tips-msg">
      <el-tooltip>
        <div slot="content">
          <i class="el-icon-star-on" style="color: orange;" />{{ $t('修改内容') }}<br>
          <i class="el-icon-star-on" style="color: green;" />{{ $t('新添内容') }}
        </div>
        <i class="el-icon-question" />
      </el-tooltip>
    </div>
    <div v-if="form.comparisonType === 'list'" class="tips-msg">
      <el-tooltip>
        <div slot="content">
          <i class="el-icon-star-on" style="color: orange;" />{{ $t('修改内容') }}<br>
          <i class="el-icon-star-on" style="color: green;" />{{ $t('新添内容') }}<br>
          <i class="el-icon-star-on" style="color: #a31b1b;" />{{ $t('子基金已删除或管理端新增内容') }}
        </div>
        <i class="el-icon-question" />
      </el-tooltip>
    </div>
    <div :class="['list-table', (activeName !== 'company' ? 'noPad' : '')]" style="padding: 0 !important;;">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('管理公司')" :disabled="loading" name="company" />
        <el-tab-pane :label="$t('基金信息')" :disabled="loading" name="fund">
          <el-tabs v-if="activeFundMenuArray && !loading" v-model="activeFundMenu" @tab-click="handlerClickMenu">
            <el-tab-pane v-for="(item, index) in activeFundMenuArray" :key="index" :label="item.menuName" :name="item.menuId" />
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane :label="$t('项目信息')" :disabled="loading" name="deal">
          <el-tabs v-show="!loading" v-model="activeNameSub" @tab-click="handleClickSub">
            <el-tab-pane :label="$t('项目')" :disabled="loading" name="deal" />
            <el-tab-pane :label="$t('基金')" :disabled="loading" name="fund" />
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="flex-tab" style="display: flex;column-gap: 15px;">
      <el-tabs v-if="activeName === 'company'" v-model="activeCompanyName" tab-position="left" style="min-width: 100px;" @tab-click="handleCompanyClick">
        <el-tab-pane :label="$t('基本信息')" :disabled="loading" name="baseInfo" />
        <el-tab-pane :label="$t('内部治理')" :disabled="loading" name="IGF" />
        <el-tab-pane :label="$t('团队核心')" :disabled="loading" name="teamCore" />
        <el-tab-pane :label="$t('在管基金')" :disabled="loading" name="FUM" />
        <el-tab-pane :label="$t('已投项目')" :disabled="loading" name="PAI" />
        <el-tab-pane :label="$t('历史业绩')" :disabled="loading" name="HP" />
      </el-tabs>
      <div v-loading="loading" class="flex-right">
        <!-- 表单 -->
        <el-form v-if="form.comparisonType === 'form'" ref="form" :model="form" label-width="120px" class="dataForm rightContent">
          <el-row>
            <el-col v-for="(item, index) in Object.keys(form.fieldName)" :key="index" :span="getSpan(item)">
              <el-form-item :label="$t(form.fieldName[item].fieldName) + '：'" :prop="item">
                <div v-if="form.fieldName[item].fieldType === 'money'" :class="setColor(item)" style="color: #666;" @mouseover="getFormOldData(item)" @mouseleave="getFormOldDataMsg = ''">
                  <el-tooltip :disabled="isEmpty(getFormOldDataMsg)" :content="getFormOldDataMsg" placement="top">
                    <span>{{ moneyFormat(form.gpData[item], 'w') }}</span>
                  </el-tooltip>
                </div>
                <div v-else :class="setColor(item)" style="color: #666;" @mouseover="getFormOldData(item)" @mouseleave="getFormOldDataMsg = ''">
                  <el-tooltip :disabled="isEmpty(getFormOldDataMsg)" :content="getFormOldDataMsg" placement="top">
                    <span>{{ form.gpData[item] }}</span>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 列表差异比较 -->
        <div v-else-if="form.comparisonType === 'list'" v-loading="loading" :element-loading-text="isEmpty(loadingText) ? $t('加载中...') : loadingText" style="min-height: 100%;">
          <div :style="{ 'display': activeName !== 'company' ? 'flex' : 'static' }">
            <el-tabs v-if="activeName === 'fund'" v-model="activeFundSubMenu" tab-position="left" @tab-click="handlerFundSubMenu">
              <el-tab-pane :label="$t('基本信息')" :disabled="loading" name="fund_baseInfo" />
              <el-tab-pane :label="$t('出资信息')" :disabled="loading" name="fund_investor" />
              <el-tab-pane :label="$t('基金估值')" :disabled="loading" name="fund_valuation" />
              <el-tab-pane :label="$t('信息披露')" :disabled="loading" name="fund_reveal" />
            </el-tabs>
            <div :class="[activeName === 'company' ? 'list-type1' : 'list-type2']">
              <el-table v-loading="loading" tooltip-effect="darkTable" :data="form.dataList" border>
                <el-table-column :label="$t('序号')" align="center" show-overflow-tooltip min-width="50">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column v-for="(item, index) in Object.keys(form.fieldName)" :key="index" align="center" min-width="120">
                  <template slot="header" slot-scope="{}">
                    <span>{{ $t(form.fieldName[item].fieldName) }}</span>
                    <span v-if="form.fieldName[item] ? form.fieldName[item].fieldType === 'money' : false">{{ $t('金额单位') }}</span>
                    <span v-else-if="form.fieldName[item] ? form.fieldName[item].fieldType === 'dataList' : (isEmpty(form.fieldName[item].tooltipText))">
                      <el-tooltip :content="$t(form.fieldName[item].tooltipText)">
                        <i class="el-icon-question" />{{ form.fieldName[item].tooltipText }}
                      </el-tooltip>
                    </span>
                  </template>
                  <template slot-scope="scope">
                    <span v-if="form.fieldName[item].fieldType === 'money'" :class="setListColor(scope.$index, item, form.dataList[scope.$index][item])" @mouseover="getListOldData(scope.$index, item, 'money')" @mouseleave="getListOldDataMsg = ''">
                      <el-tooltip :disabled="isEmpty(getListOldDataMsg)" :content="getListOldDataMsg" placement="top">
                        <span>{{ moneyFormat(form.dataList[scope.$index][item], 'w') }}</span>
                      </el-tooltip>
                    </span>
                    <span v-else-if="form.fieldName[item].fieldType === 'dataList' && !isEmpty(form.dataList[scope.$index][item])" :class="setListColor(scope.$index, item, form.dataList[scope.$index][item])" @contextmenu.prevent="getListOldData(scope.$index, item, 'dataList')">
                      <span v-for="(it, i) in JSON.parse(form.dataList[scope.$index][item])" :key="i">
                        <el-link type="primary" :underline="false" @click="onlinePreview(it, 'gp')">{{ it.name }}</el-link><br>
                      </span>
                    </span>
                    <span v-else :class="setListColor(scope.$index, item, form.dataList[scope.$index][item])" @mouseover="getListOldData(scope.$index, item, 'text')" @mouseleave="getListOldDataMsg = ''">
                      <el-tooltip :disabled="isEmpty(getListOldDataMsg)" :content="getListOldDataMsg" placement="top">
                        <span>{{ form.dataList[scope.$index][item] }}</span>
                      </el-tooltip>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div v-else v-loading="loading" style="min-height: 100%;" />
      </div>
    </div>

    <el-dialog :title="$t('管理端信息')" :visible.sync="dialogVisible" width="30%" :destroy-on-close="true" :close-on-click-modal="false" append-to-body>
      <div style="height: 300px;overflow: auto;">
        <div v-for="(item, index) in dialogDataList" :key="index" style="padding-bottom: 15px;">
          <el-link type="primary" :underline="false" @click="onlinePreview(item, 'saas')">{{ item.name }}</el-link><br>
        </div>
        <div style="position: absolute; bottom: 20px;right: 20px;">
          <el-button type="primary" size="mini" @click="dialogVisible = false">{{ $t('关闭') }}</el-button>
        </div>
      </div>
    </el-dialog>
    <OnlinePreview ref="OnlinePreview" />
  </div>
</template>

<script>
import {
  allMemberInfo,
  contrastBaseInfo,
  contrastIGF,
  dealListToDealInfo,
  dealListToFundInfo,
  findFundInvestor,
  findFundReveal,
  findFundValuation,
  fundListInfo,
  fundListMenu,
  historyPerformanceInfo,
  investProjectInfo,
  manageFundInfo,
  onlinePreviewGpFile,
  teamCoreInfo
} from '@/api/bf/portal/gpCompanyInfo'

export default {
  components: {},
  props: {},
  data() {
    return {
      // 遮盖层
      loading: false,
      loadingText: '',
      dialogVisible: false,
      dialogDataList: [],
      activeName: '',
      activeCompanyName: 'baseInfo',
      activeNameSub: '',
      activeFundMenu: '',
      activeFundSubMenu: '',
      activeFundMenuArray: [],
      form: {},
      getFormOldDataMsg: '',
      getListOldDataMsg: '',
      test: true,
      queryParams: {}
    }
  },
  watch: {},
  created() {
  },
  methods: {
    init(data) {
      this.queryParams = { gpId: data.gpId, reportId: data.reportId }
      this.activeName = 'company'
      this.handleClick({ name: this.activeName })
    },
    // 一级菜单
    handleClick({ name }) {
      this.activeFundMenuArray = []
      switch (name) {
        case 'company':
          this.handleCompanyClick({ name: 'baseInfo' })
          break
        case 'fund':
          // this.fundListTag()
          this.fundListMenu()
          break
        case 'deal':
          this.dealListTag()
          break
      }
    },
    // 管理公司二级菜单
    handleCompanyClick({ name }) {
      this.activeCompanyName = name
      switch (name) {
        case 'baseInfo':
          this.gpBaseInfo()
          break
        case 'IGF':
          this.internalGovernanceFramework()
          break
        case 'teamCore':
          this.teamCoreInfo()
          break
        case 'FUM':
          this.manageFundInfo()
          break
        case 'PAI':
          this.investProjectInfo()
          break
        case 'HP':
          this.historyPerformanceInfo()
          break
      }
    },
    // 基金二级菜单
    handlerClickMenu({ menuId }) {
      console.log(menuId)
      this.activeFundSubMenu = 'fund_baseInfo'
      this.$nextTick(() => {
        this.handlerFundSubMenu({ name: this.activeFundSubMenu })
      })
    },
    // 基金三级菜单
    handlerFundSubMenu({ name }) {
      console.log(name, this.activeFundMenu)
      var query = JSON.parse(JSON.stringify(this.queryParams))
      query.dealId = this.activeFundMenu
      switch (name) {
        case 'fund_baseInfo':
          this.fundListInfo(query)
          break
        case 'fund_investor':
          this.findFundInvestor(query)
          break
        case 'fund_valuation':
          this.findFundValuation(query)
          break
        case 'fund_reveal':
          this.findFundReveal(query)
          break
      }
    },
    // 项目列表二级菜单
    handleClickSub({ name }) {
      switch (name) {
        case 'deal':
          this.dealListToDealInfo()
          break
        case 'fund':
          this.dealListToFundInfo()
          break
      }
    },
    // 加载基本信息
    gpBaseInfo() {
      this.loading = true
      this.form = {}
      contrastBaseInfo(this.queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = true
      })
    },
    /** 内部治理框架 **/
    internalGovernanceFramework() {
      this.loading = true
      this.form = {}
      contrastIGF(this.queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 团队核心 **/
    teamCoreInfo() {
      this.loading = true
      this.form = {}
      teamCoreInfo(this.queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 在管基金 **/
    manageFundInfo() {
      this.loading = true
      this.form = {}
      manageFundInfo(this.queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 已投项目 **/
    investProjectInfo() {
      this.loading = true
      this.form = {}
      investProjectInfo(this.queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 全部成员 **/
    allMemberInfo() {
      this.loading = true
      this.form = {}
      allMemberInfo(this.queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 历史业绩 **/
    historyPerformanceInfo() {
      this.loading = true
      this.form = {}
      historyPerformanceInfo(this.queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 基金列表菜单 **/
    fundListMenu() {
      this.loading = true
      this.form = {}
      fundListMenu(this.queryParams).then(response => {
        this.form = response.data
        if (this.form.gpDataList) {
          this.activeFundMenuArray = JSON.parse(JSON.stringify(this.form.gpDataList))
          this.activeFundMenu = this.activeFundMenuArray[0].menuId
          this.$nextTick(() => {
            this.handlerClickMenu({ name: this.activeFundMenu })
          })
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 基金列表信息 */
    fundListInfo(queryParams) {
      this.loading = true
      this.form = {}
      fundListInfo(queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 基金 - 出资人 **/
    findFundInvestor(queryParams) {
      this.loading = true
      this.form = {}
      findFundInvestor(queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 基金 - 基金估值 **/
    findFundValuation(queryParams) {
      this.loading = true
      this.form = {}
      findFundValuation(queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 基金 - 信息披露 **/
    findFundReveal(queryParams) {
      this.loading = true
      this.form = {}
      findFundReveal(queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 项目列表信息 - 子菜单项目 **/
    dealListToDealInfo() {
      this.loading = true
      this.form = {}
      dealListToDealInfo(this.queryParams).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 项目列表 子菜单: 基金 **/
    dealListToFundInfo() {
      this.loading = true
      this.form = {}
      dealListToFundInfo(this.queryParams).then(response => {
        console.log(response)
        this.form = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 项目列表 **/
    dealListTag() {
      this.form = {}
      this.activeNameSub = 'deal'
      this.dealListToDealInfo()
    },
    /** 点击显示旧数据 **/
    getListOldData(index, name, type) {
      var rowData = this.form.dataList[index]
      if (rowData.colorDataType === 'data-update') {
        this.form.saasDataList && this.form.saasDataList.forEach(item => {
          if (rowData[rowData.key] === item[item.key] && rowData[name] !== item[name]) {
            if (type === 'dataList') {
              this.dialogVisible = true
              this.$nextTick(() => {
                this.dialogDataList = JSON.parse(item[name])
              })
            } else if (type === 'money') {
              this.getListOldDataMsg = this.moneyFormat(item[name], 'w')
            } else {
              this.getListOldDataMsg = item[name]
            }
          }
        })
      }
    },
    getFormOldData(name) {
      if (this.form.gpData[name] !== this.form.saasData[name] && !this.isEmpty(this.form.saasData[name])) {
        this.getFormOldDataMsg = this.form.saasData[name]
      } else {
        this.getFormOldDataMsg = ''
      }
    },
    /** 预览 **/
    onlinePreview(row, source) {
      if (source === 'saas') {
        this.$refs.OnlinePreview.onlinePreviewFile(row.fileId || row.id, 'view')
      } else {
        this.loading = true
        this.loadingText = this.$t('请耐心等待，获取填报端文件信息需要一些时间。')
        onlinePreviewGpFile(row.name, row.id, this.queryParams.gpId).then(response => {
          this.loading = false
          this.loadingText = ''
            this.$refs.OnlinePreview.onlinePreviewFile(response.data, 'view')
        }).catch(() => {
          this.loadingText = ''
          this.loading = false
        })
      }
    },
    /** 设置差异颜色 **/
    setColor(data) {
      var saasData = this.form.saasData[data]
      var gpData = this.form.gpData[data]
      if (!this.isEmpty(saasData) || !this.isEmpty(gpData)) {
        if (this.isEmpty(saasData) || saasData === '-') {
          return ['data-add']
        } else if (saasData !== gpData) {
          return ['data-update']
        }
      }
      return []
    },
    setListColor(index, name, value) {
      var result = 'data-update'
      var tempColor = this.form.dataList[index].colorDataType
      if (tempColor !== 'data-update' && !this.isEmpty(tempColor)) {
        return tempColor
      } else if (tempColor === 'data-update') {
        this.form.saasDataList && this.form.saasDataList.forEach((saas) => {
          if (this.form.dataList[index][this.form.dataList[index]['key']] === saas[saas.key]) {
            Object.keys(saas).forEach(s1 => {
              if (s1 === name) {
                if (name === 'managerName') {
                  console.log('2')
                }
                if (saas[s1] === value) {
                  result = ''
                }
              }
            })
          }
        })
      } else {
        // 1. 先找当相同的行, 是修改类型
        this.form.saasDataList && this.form.saasDataList.forEach((saas) => {
          this.form.gpDataList && this.form.gpDataList.forEach((gp) => {
            this.form.dataList && this.form.dataList.forEach((sum) => {
              if (saas[saas.key] === gp[gp.key] && gp[gp.key] === sum[sum.key] && name === sum.key && value === sum[sum.key]) {
                sum.colorDataType = 'data-update'
                result = ''
              }
            })
          })
        })
        // 2. 新增数据, saas没有的内容, 算是新增
        var keyArr = []
        if (result !== '') {
          this.form.saasDataList && this.form.saasDataList.forEach((saas) => {
            keyArr.push(saas[saas.key])
          })
          this.form.gpDataList && this.form.gpDataList.forEach((gp) => {
            if (!keyArr.includes(gp[gp.key])) {
              this.form.dataList && this.form.dataList.forEach((sum) => {
                if (gp[gp.key] === sum[sum.key] && name === sum.key && value === sum[sum.key]) {
                  sum.colorDataType = 'data-add'
                  result = 'data-add'
                }
              })
            }
          })
        }
        // 3. 设置saas或删除的颜色, saas有而GP没有的算是删除或GP特有内容
        if (result !== '' && result !== 'data-add') {
          keyArr = []
          this.form.gpDataList && this.form.gpDataList.forEach((gp) => {
            keyArr.push(gp[gp.key])
          })
          this.form.saasDataList && this.form.saasDataList.forEach((saas) => {
            if (!keyArr.includes(saas[saas.key])) {
              this.form.dataList && this.form.dataList.forEach((sum) => {
                if (saas[saas.key] === sum[sum.key] && name === sum.key && value === sum[sum.key]) {
                  sum.colorDataType = 'data-del'
                  result = 'data-del'
                }
              })
            }
          })
        }
      }
      return result
    },
    /** 设置输入框的span **/
    getSpan(item) {
      if (this.isEmpty(item)) {
        return 12
      } else {
        const num = Number(this.form.fieldName[item].span)
        if (!isNaN(num)) {
          return num
        }
        return 12
      }
    }
  }
}
</script>

<style scoped lang="scss">
  html.light .el-input.is-disabled ::v-deep .el-input__inner {
    background-color: #FFFFFF00;
    border: none;
    margin-left: -15px;
    cursor: pointer;
  }
  html.light .el-textarea.is-disabled ::v-deep .el-textarea__inner {
    background-color: #FFFFFF00;
    border: none;
    margin-left: -15px;
    cursor: pointer;
  }
  .dialogForm .el-dialog__body>div .el-form {
    padding-right: 0 !important;
    right: 0 !important;
  }
  html.light .dialogForm .el-dialog__body>div .el-form {
    padding-right: 0 !important;
    right: 0 !important;
  }
  .data-update {
    color: orange !important;
    cursor: default;
  }
  .data-add {
    color: green !important;
  }
  .data-del {
    color: #a31b1b !important;
  }
  .tips-msg {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 20px;
    z-index: 9999;
  }
  ::v-deep .el-dialog__body {
    padding-top: 0 !important;
  }
 ::v-deep html.light .dataForm .el-row .el-form-item {
   min-height: auto !important;
 }
 ::v-deep .dataForm .el-row .el-form-item {
   min-height: auto !important;
 }
 html.light .dataForm .el-row ::v-deep.el-form-item__content {
   clear: unset !important;
 }
 .list-type1 {
  width: 100%;
 }
 .list-type2 {
  width: 100%;
 }
 .list-table{
  position: relative;
}
.flex-right{
  height: calc(100vh - 150px);
  min-width: calc(100% - 115px);
  overflow: auto;
  flex: 1;
  position: relative;
}
</style>
